Before 對指定元素添加最後一個子元素
After 對指定元素添加第一個子元素
必須加上 content 屬性,否則無任何效果
我們先建立一段文字
<p>一段文字</p>
接著在CSS中對指定元素添加偽元素
p::before
{
   content: "文字前 | "; 
}
p::after{
    content: " | 文字後"; 
}
成功顯示偽元素效果~

在F12中可以看到的確在子元素前後加上了偽元素

在使用者觸發元素的特定行為時顯示效果
常見的有:hover
當鼠標觸碰到元素時,就會觸發hover內所定義的屬性。
<p>一段文字</p>
p:hover
{
  background-color: pink;
}
